<template>
	<CommonCard title="今日订单" :value="numberFormat(orderToday)">
		<template #default>
			<div ref="lineChartRef" style="width: 100%; height: 100%"></div>
		</template>
		<template #footer>
			<div>
				昨日订单量 &nbsp;
				<span class="emphasis">{{ numberFormat(orderLastDay) }}</span>
			</div>
		</template>
	</CommonCard>
</template>

<script lang="ts">
export default {
	name: 'TodayOrders',
}
</script>

<script lang="ts" setup>
import CommonCard from './CommonCard.vue'
import * as echarts from 'echarts'
import type { EChartsType } from 'echarts'
import { useReportDataStore } from '@/stores/reportData'
import useFormat from '@/hooks/useFormat'
import { computed, onMounted, ref, watch } from 'vue'
const { numberFormat } = useFormat()
const reportDataStore = useReportDataStore()

//今日订单
const orderToday = computed(() => reportDataStore.reportData.orderToday)
//昨日订单
const orderLastDay = computed(() => reportDataStore.reportData.orderLastDay)
//Y轴数据
const orderTrend = computed(() => reportDataStore.reportData.orderTrend || [])
//X轴数据
const orderTrendAxis = computed(
	() => reportDataStore.reportData.orderTrendAxis || []
)

//获取页面中的标签对象
const lineChartRef = ref()
let lineChart: EChartsType
const getOption = () => {
	return {
		xAxis: {
			boundaryGap: false,
			data: orderTrendAxis.value,
		},
		yAxis: {
			show: false,
		},
		grid: {
			left: 0,
			top: 0,
			bottom: 0,
			right: 0,
		},
		series: {
			name: '今日订单',
			type: 'line',
			data: orderTrend.value,
			// 折线是否平滑
			smooth: true,
			itemStyle: {
				// 去除折线的小圆点
				opacity: 0,
			},
			lineStyle: {
				// 去掉默认的折线
				opacity: 0,
			},
			areaStyle: {
				// 设置折线区域的颜色
				color: 'purple',
			},
		},
		tooltip: {
			// x轴上触发
			trigger: 'axis',
			// 限制在图表区域内
			confine: true,
		},
	}
}

onMounted(() => {
	lineChart = echarts.init(lineChartRef.value)
	lineChart.setOption(getOption())
	window.addEventListener('resize', () => {
		lineChart.resize()
	})
})
watch(orderToday, () => {
	lineChart.setOption(getOption())
})
</script>

<style></style>
